<template>
    <el-form label-width="120px">

        <el-form-item label="作者">
            <el-input v-model="comment.author"></el-input>

        </el-form-item>

        <el-form-item label="作者头像">
            <!-- <ImageManager v-model="comment.avatar" ></ImageManager> -->
        </el-form-item>

        <el-form-item label="商品">
            <el-autocomplete v-model="comment.goods.name" :fetch-suggestions="queryProduct" placeholder="选择商品"
                @select="handleSelectProduct" />
        </el-form-item>

        <el-form-item label="评论日期">
            <el-date-picker v-model="comment.date" type="date" placeholder="选择发布日期" size="default" />
        </el-form-item>

        <el-form-item label="内容">
            <el-input v-model="comment.content"></el-input>
        </el-form-item>

        <el-form-item label="评分">
            <el-rate v-model="comment.score" />
        </el-form-item>

        <el-form-item label="晒图">
            <ImageManager v-model="comment.img_show" :maxNumber="3" ></ImageManager>
        </el-form-item>

        <el-form-item label="状态">
            <el-switch v-model="comment.status" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>

        <el-form-item label="">
            <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>

    </el-form>
<!-- <FileManager :FileManagerData="FileManagerData" @express="checkImage"></FileManager> -->
</template>

<script lang="ts" setup>

import { ref } from 'vue';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// import FileManager from '../Common/file-manager.vue'
import ImageManager from '../Common/image-manager.vue'
const VITE_URL = window.VITE_URL;

// const FileManagerData = ref<object>({
//     visible: false,
//     image: '',
//     imageObj: null,
// });

// const checkImage = (data: object) => {

//     if ( FileManagerData.value.imageObj ) {
//         FileManagerData.value.imageObj.bg_img = data.image.path
//     }

// }

const route = useRoute();
// let comment_id: number | string = 0;
let comment_id: any = 0;
const product_list = ref<Array<object>>([])
const comment:any = ref<object>({

    avatar:'',
    goods: {},
    status: '0'

})
// const avatar = ref<String>('');
const save = () => {

    let url: string = VITE_URL + '/admin.goodsComment/edit?id=' + comment_id;

    const data = {

        author: comment.value.author,
        avatar: comment.value.avatar,
        customer_id: 0, // 虚拟客户
        goods_id: comment.value.goods.id,
        content: comment.value.content,
        score: comment.value.score,
        images: comment.value.images,
        date: comment.value.date,
        status: comment.value.status,
    };

    axios.post(url, data).then(res => {

        ElMessage({

            message: !res.data.status ? '保存成功' : res.data.message,
            duration: 1000,
            type: !res.data.status ? 'success' : 'error',

        })

    })
}

const get_comment_info = () => {

    const url: string = VITE_URL + '/admin.goodsComment/single?id=' + comment_id;
    axios.get(url).then((res) => {

        comment.value = res.data

        comment.value.status += '';
        // avatar.value = res.data.avatar
    });

}

const queryProduct = (queryString: string, cb: (arg: any) => void) => {
    const results = queryString
    // console.log( 123 )
    // console.log( results )
    const url: string = VITE_URL + '/admin.goods/search?filter=' + results;
    axios.get(url).then(res => {

        // product_list.value = res.data
        res.data.forEach( (element:any) => {

            element.value = element.name
        });
        cb(res.data)

    })


}

const handleSelectProduct = (res: any) => {

    // console.log(res)
    comment.value.goods = res;

}

const init = () => {

    comment_id = route.params.id ? route.params.id : 0;

    if (comment_id) {

        get_comment_info();
    }

}
init(); 
</script>